<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .setfont{
            font-size: 100px;
        }
        .setcolor{
            color: red;
        }
        .setborder{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="setfont setcolor setborder">传统的class</div>

        <div :class="{setfont:issetfont, setcolor:issetcolor, setborder:issetborder}">使用对象形式绑定class</div>

        <div :class="[activeColor,activeBorder,activeFontSize]">使用数组语法绑定class</div>

        <div :style="{color:styleColor,fontSize:size+'px'}">对象写法, 内联style样式</div>

        <div :style="[mycolor,mysize]">数组写法, 内联style样式修改</div>
    </div>
</body>
<script>
    // 动态地去绑定一些HTML属性时，可以通过v-bind指令来 响应式更新该DOM节点
    new Vue({
        el: "#box",
        data() {
            return {
                //三个属性都赋给class, 但是在data中用true和false判断是否生效
                issetfont:true,
                issetcolor:false,
                issetborder:true,

                //就是将class值在Vue中成为一个数组再给class赋值
                activeColor:'setcolor',
                activeBorder:'setborder',
                activeFontSize:'setfont',

                //对象写法, 内联style样式
                styleColor:"red",
                size:50,

                //数组写法
                mycolor:{color:'red',border:'1px solid seagreen'},
                mysize:{fontSize:'80px'}
            }
        },
    });
</script>

</html>